<template>
	<view>
		<view class="content">

			<view class="detail-user">
				<u-avatar :src="userdata?.avatar" mode="square" size="50">
				</u-avatar>
				<view :fileList="fileList" @click="updateImg" class="upload" :maxCount="1">
					<view class="title">
						<span>修改头像 </span>
						<up-icon name="arrow-right"></up-icon>
					</view>
				</view>
			</view>
			<up-cell-group border="false">
				<up-cell title="姓名" isLink arrow-direction="right" :value="userdata?.user_name"
					@click="show.show2 = true;"></up-cell>
				<u-modal :show="show.show2" @confirm="confirm1" @cancel="show.show2 = false" :showCancelButton="true"
					:title="show.nametitle">
					<view>
						<view class="change-name">
							<input type="text" :value="userdata?.user_name" @input="input1" />
						</view>
					</view>
				</u-modal>

				<up-cell title="性别" isLink arrow-direction="right" :value="userSex"
					@click="show.show3 = true;"></up-cell>
				<u-action-sheet :actions="sexlist" :title="sextitle" :show="show.show3" @close="show.show3 = false"
					@select="sexselect"></u-action-sheet>
				<up-cell title="年龄" isLink arrow-direction="right" :value="userdata?.age"
					@click="show.show4=true"></up-cell>
				<!-- <u-modal :show="show.show4" @confirm="confirm2" @cancel="show.show4=fasle" :showCancelButton="true">
					<view>
						<text class="title">修改年龄</text>
						<view class="change-name">
							<input type="text" :value="userdata?.age" @input="input2" />
						</view>
					</view>
				</u-modal> -->
				<up-picker :show="show.show4" :columns="columns" @confirm="confirm2"
					@cancel="show.show4=fasle"></up-picker>
				<up-cell title="地区" isLink arrow-direction="right" :value="area" @click="visible = true">
				</up-cell>
				<cityPicker :column="2" :default-value="defaultValue" :mask-close-able="maskCloseAble"
					@confirm="address" @cancel="visible=false" :visible="visible" />
				<up-cell title="邮箱" isLink arrow-direction="right" :value="userdata?.email"
					@click="show.show6=true"></up-cell>
				<u-modal :show="show.show6" @confirm="confirm3" @cancel="show.show6 = false" :showCancelButton="true"
					:title="show.emailtitle">
					<view>

						<view class="change-name">
							<input type="text" :value="userdata?.email" @input="input3" />
						</view>
					</view>
				</u-modal>
				<up-cell title="个性签名" isLink arrow-direction="right" :value="userdata?.signature"
					@click="show.show7=true"></up-cell>
				<u-modal :show="show.show7" @confirm="confirm4" @cancel="show.show7 = false" :showCancelButton="true"
					:title="show.persontitle">
					<view>

						<view class="change-name">
							<input type="text" :value="userdata?.signature" @input="input4" />
						</view>
					</view>
				</u-modal>
			</up-cell-group>
		</view>
	</view>
</template>

<script lang="ts" name="userDetail" setup>
	import cityPicker from '../../uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	import { reactive, ref, onMounted, inject } from 'vue'
	import { GetUserinfo, PutUserinfo, PutAvatar } from '../../apis/user'
	import userStore from '../../store/modules/user'
	import { loginStore } from '../../store/modules/login';
	const useStore = userStore();
	let userdata = ref()
	let show = reactive({
		persontitle: '修改个性签名',
		emailtitle: '修改邮箱',
		nametitle: '修改昵称',
		show1: false,
		show2: false,
		show3: false,
		show4: false,
		show5: false,
		show6: false,
		show7: false,
		show8: false,
	})
	let fail = ref(true)
	let useralter = reactive({
		name: '',
		age: 0,
		email: '',
		signature: ''
	})

	let area = ref('中国')
	let userSex = ref('未知')
	let visible = ref(false)
	let defaultValue = ref('420103')
	const fileList = []
	let maskCloseAble = ref(true)
	const columns = reactive([["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "100"
	]]);
	const sextitle = '请选择性别'
	const sexlist = [{
		name: '男'
	},
	{
		name: '女'
	}]

	onMounted(() => {
		GetUserinfoData()
	})
	//性别选择

	let sexselect = function (e) {
		userSex.value = e.name
		console.log(userSex.value);
		if (userSex.value == '女') {
			userdata.value.sex = 1
		} else if (userSex.value == '男') {
			userdata.value.sex = 2
		} else {
			userdata.value.sex = 3
		}

		console.log(userdata.value.sex);
		PutUserinfoData()
	}
	//修改姓名
	function input1(e) {
		useralter.name = e.target.value;
	}
	function confirm1() {

		userdata.value.user_name = useralter.name;
		PutUserinfoData()
		if (fail.value == false) {
			uni.showLoading({
				title: '修改失败'
			});
			setTimeout(() => {
				uni.hideLoading();
			}, 1000)
		} else {
			show.show2 = false
		}

	}

	//修改年龄
	// function input2(e) {
	// 	useralter.age = e.target.value;
	// }
	function confirm2(e) {

		console.log(~~e.value[0]);
		userdata.value.age = ~~e.value[0];
		PutUserinfoData()
		if (fail.value == false) {
			uni.showLoading({
				title: '修改失败'
			});
			setTimeout(() => {
				uni.hideLoading();
			}, 1000)
		} else {
			show.show4 = false
		}
	}

	//修改邮箱
	function input3(e) {
		useralter.email = e.target.value;
	}
	function confirm3() {
		userdata.value.email = useralter.email;
		PutUserinfoData()
		if (fail.value == false) {
			uni.showLoading({
				title: '修改失败'
			});
			setTimeout(() => {
				uni.hideLoading();
			}, 1000)
		} else {
			show.show6 = false
		}
	}
	//修改个性签名
	function input4(e) {
		useralter.signature = e.target.value;
	}
	function confirm4() {
		userdata.value.signature = useralter.signature;
		PutUserinfoData()
		if (fail.value == false) {
			uni.showLoading({
				title: '修改失败'
			});
			setTimeout(() => {
				uni.hideLoading();
			}, 1000)
		} else {
			show.show7 = false
		}
	}

	// //头像上传
	// let afterRead = async function (event) {
	// 	// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
	// 	let lists = [].concat(event.file)
	// 	let fileListLen = this[`fileList${event.name}`].length
	// 	lists.map((item) => {
	// 		this[`fileList${event.name}`].push({
	// 			...item,
	// 		})
	// 	})
	// 	for (let i = 0; i < lists.length; i++) {
	// 		const result = await this.uploadFilePromise(lists[i].url)
	// 		let item = this[`fileList${event.name}`][fileListLen]
	// 		this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
	// 			status: 'success',
	// 			message: '',
	// 			url: result
	// 		}))
	// 		fileListLen++
	// 	}
	// }
	//更改头像
	let updateImg = function () {
		const useloginStore = loginStore();
		const token = useloginStore.profile;
		uni.chooseImage({
			sourceType: ['album', 'camera'],  //从相册选择
			success: chooseImageRes => {
				console.log('成功', chooseImageRes.tempFilePaths);
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: 'http://121.196.217.190:8080/wx/v1/user/avatar', // 上传头像的接口地址
					filePath: tempFilePaths[0],
					name: 'avatar',
					header: {
						Authorization: `Bearer ${token}`
					},
					success: res => {
						console.log(res);
						uni.reLaunch({
							url: '/pages/userDetail/userDetail'
						})
					},
					fail: err => {
						console.log(err);
						// this.myToast('图片上传失败', 'none');
					}
				});
			},
			fail: err => {
				console.log(err);
				// this.myToast('选择图片失败', 'none');
			}
		});
	}
	// uni.chooseImage({
	// 	sourceType: ['album'], //从相册选择
	// 	success: chooseImageRes => {
	// 		console.log('成功', chooseImageRes);
	// 		const tempFilePaths = chooseImageRes.tempFilePaths;
	// 		uni.uploadFile({
	// 			url: 'http://192.168.21.10:8080/wx/v1/user/avatar',
	// 			filePath: tempFilePaths[0],
	// 			name: 'file',
	// 			header: {
	// 				accessToken: uni.getStorageSync('accessToken'),
	// 				platform: 2,
	// 				type: 1
	// 			},
	// 			formData: {
	// 				avatar: 'upload'
	// 			},
	// 			success: res => {
	// 				// console.log('上传成功', JSON.parse(res.data));
	// 				// uploadFile上传成功后，根据和后台的约定msgCode判断接口调用状态
	// 				let data = JSON.parse(res.data);
	// 				// 成功：获取到头像
	// 				if (data.msgCode == 200) {
	// 					this.updateParams.headImg = JSON.parse(res.data).data;
	// 					// 更新当前页面数据
	// 					this.updateUserInfo();
	// 				}
	// 				// 失败报错
	// 				else {
	// 					uni.showToast({
	// 						title: '网络错误！',
	// 						icon: 'none',
	// 					});
	// 				}

	// 			}
	// 		});
	// 	},
	// 	fail: err => {
	// 		this.myToast('图片上传失败', 'none');
	// 	}
	// });
	// }
	//获取用户信息
	const GetUserinfoData = async function () {
		const data = {
			user_id: useStore.user_id
		}
		try {
			const res = await GetUserinfo(data);
			userdata.value = res.data
			area.value = userdata.value.province + userdata.value.city
			console.log(area.value);
			if (userdata.value.sex == 1) {
				userSex.value = '女'
			} else if (userdata.value.sex == 2) {
				userSex.value = '男'
			} else {
				userSex.value = '未知'
			}

		} catch (error) {
			// 错误处理逻辑
			console.error('An error occurred while executing Captcha function:', error);
		}
	}
	//修改用户信息
	const PutUserinfoData = async function () {
		try {
			const data = {
				"user_id": userdata.value.user_id,
				"user_name": userdata.value.user_name,
				"sex": userdata.value.sex,
				"signature": userdata.value.signature,
				"email": userdata.value.email,
				"age": userdata.value.age,
				"province": userdata.value.province,
				"city": userdata.value.city,
				'user_school': userdata.value.city
			}
			const res = await PutUserinfo(data);
			if (res.code != '1000') {
				fail.value = false
			} else {
				fail.value = true
			}
			console.log(res);
		} catch (error) {
			// 错误处理逻辑
			console.error('An error occurred while executing Captcha function:', error);

		}
	}
	// 地区修改
	let address = function (val) {
		userdata.value.province = val.provinceName
		userdata.value.city = val.cityName
		area.value = val.provinceName + val.cityName
		visible.value = false
		PutUserinfoData()
	}
</script>

<style lang="scss">
	.content {
		padding: 10upx 10upx 10upx 10upx;

		.change-name {
			border-bottom: 1upx solid black;
		}

		.detail-user {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10upx 10upx 10upx 30upx;
			background-color: white;

			.upload {
				.title {
					display: flex;
					font-size: 15px;
					color: #606266;
					margin-right: 25upx;
				}

			}
		}

		.u-cell-group.data-v-014d39dc>view>view:nth-child(12)>view.u-cell__body.data-v-3fd6feca>text {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 12em;
		}
	}
</style>